<template>
	<div class="route-detail">
		<van-nav-bar fixed left-text="返回" left-arrow :title="!isWeixin() ? '反馈详情' : ''" @click-left="handleBack" />
		<div class="inner">
			<div class="infoItem">
				<span>描述：</span>
				<span>{{detailInfo.title}}</span>
			</div>
			<div class="infoItem">
				<span>手机号：</span>
				<span>{{detailInfo.phone}}</span>
			</div>
			<div class="infoItem">
				<span>状态：</span>
				<span v-if='detailInfo.status=="1"'>审核中</span>
				<span v-if='detailInfo.status=="2"'>同意</span>
				<span v-if='detailInfo.status=="3"'>拒绝</span>
				<span v-if='detailInfo.status=="4"'>线索提交中</span>
				<span v-if='detailInfo.status=="5"'>线索已发放</span>
			</div>
			<!-- <div class="infoItem" v-if="detailInfo.ddimage!=''">
				<span>订单截图：</span>
				<van-image width="100" height="100" :src="detailInfo.ddimage" @click='openPic(detailInfo.ddimage)' />
			</div> -->
			<div class="infoItem" v-if="detailInfo.zhimage!=''">
				<span>证据图片：</span>
				<van-image width="100" height="100" :src="detailInfo.zhimage" @click='openPic(detailInfo.zhimage)' />
			</div>
			<div class="infoItem" v-if="detailInfo.xsimage!=''">
				<span>线索图片：</span>
				<van-image width="100" height="100" :src="detailInfo.xsimage" @click='openPic(detailInfo.xsimage)' />
			</div>
			<div class="infoItem">
				<span>线索手机号：</span>
				<span>{{detailInfo.xsphone!=''?detailInfo.xsphone:'暂无'}}</span>
			</div>
			<div class="infoItem">
				<span>备注：</span>
				<span>{{detailInfo.beizhu!=''?detailInfo.beizhu:'暂无'}}</span>
			</div>
			<!-- <div class="infoItem">
				<span>电话录音：</span>
				<audio style="width: 230px;" :src="detailInfo.luyin" controls @click="playAudio(detailInfo.luyin)"></audio>
			</div> -->
			<div class="infoItem">
				<span>提交时间：</span>
				<span>{{
			    detailInfo?.addtime
			      ? dayjs
			          .unix(detailInfo?.addtime)
			          .format("YYYY-MM-DD HH:mm:ss")
			      : "-"
			  }}</span>
			</div>
		</div>
	</div>
</template>
<script setup lang="ts">
	import { ref, computed } from "vue";
	import * as dayjs from "dayjs";
	import { getCookie, isWeixin } from "@/utils/index";
	import { useRouter, useRoute } from "vue-router";
	import { fankuiinfoApi } from "@/api/user";
	import { showImagePreview } from "vant";
	const router = useRouter();
	const route = useRoute();
	const id : any = route.query.id;

	const detailInfo = ref<any>({});
	const getDetail = async () => {
		// console.log('这是id', id)
		let { data } = await fankuiinfoApi({
			id: parseInt(id)
		});
		detailInfo.value = data;
	};
	getDetail();


	const handleBack = () => {
		router.back();
	};
	const openPic = (data : any) => {
		if (data == '') {
			return
		}
		let Img = [];
		Img.push(data);
		showImagePreview({
			images: Img,
			closeable: true,
		});
	}
	const playAudio = (val:any) => {
		val.play()
	}
</script>
<style scoped>
	.route-detail {
		width: 100%;
		min-height: 100%;
		padding-top: 56px;
		background-color: #f5f5f5;
		padding-bottom: calc(90px + constant(safe-area-inset-bottom));
		padding-bottom: calc(90px + env(safe-area-inset-bottom));
	}

	.inner {
		background: #fff;
		box-sizing: border-box;
		padding: 20px 10px;
		margin: 20px;
	}

	.infoItem {
		display: flex;
		margin: 10px 0;
		white-space: nowrap;
		
	}

	.infoItem span:first-child {
		display: inline-block;
		width: 100px;
		text-align: right;
	}
</style>